<template>
  <div style="display: flex;">
    <div class="show" style="height: 100vh; width: 40vw; ">
      <el-card class="box-card" style="height: 90%; display: flex; justify-content: center;">
        <div style="height: 260px;width: 180px; margin: 40px 8vw 20px 8vw ;">
          <img :src="courseData.url" alt="" style="width: 100%;height: 100%;">
        </div>
        <div style="margin-top: 20px; text-align: center">
          {{ courseData.name }}
        </div>
        <div style="margin-top: 50px;text-align: center;">
          {{ courseData.description }}
        </div>
      </el-card>
    </div>
    <div class="review" style="margin-left: 10px; height: 100vh; width: 60vw;">
      <el-card class="box-card" style="height: 90%;">
        <div style="margin: 10px 0 0 20px; ">
          <!-- {{ form }} -->
          <el-form v-model="form">
            <el-form-item>
              <div class="block" style="display: flex;">
                <div class="demonstration">互 动 &nbsp;性 </div>
                <div style="display: flex;  align-items: center;margin-left: 20px;">
                  <el-rate v-model="form.value1" :colors="colors">
                  </el-rate>
                </div>
              </div>
            </el-form-item>
            <el-form-item>
              <div class="block" style="display: flex;">
                <div class="demonstration">满意程度</div>
                <div style="display: flex;  align-items: center;margin-left: 20px;">
                  <el-rate v-model="form.value2" :colors="colors">
                  </el-rate>
                </div>
              </div>
            </el-form-item>
            <el-form-item>
              <div class="block" style="display: flex;">
                <div class="demonstration">教师表现</div>
                <div style="display: flex;  align-items: center;margin-left: 20px;">
                  <el-rate v-model="form.value3" :colors="colors">
                  </el-rate>
                </div>
              </div>
            </el-form-item>
            <el-form-item>
              <div class="block" style="display: flex;">
                <div class="demonstration">课程质量</div>
                <div style="display: flex;  align-items: center;margin-left: 20px;">
                  <el-rate v-model="form.value4" :colors="colors">
                  </el-rate>
                </div>
              </div>
            </el-form-item>
            <el-form-item>
              <div class="block" style="display: flex;">
                <div class="demonstration">课程难易</div>
                <div style="display: flex;  align-items: center;margin-left: 20px;">
                  <el-rate v-model="form.value5" :colors="colors">
                  </el-rate>
                </div>
              </div>
            </el-form-item>
            <el-form-item>
              <div class="block" style="display: flex;">
                <div class="demonstration">综合评分</div>
                <div style="display: flex;  align-items: center;margin-left: 20px;">
                  <el-rate v-model="form.value_average" :colors="colors">
                  </el-rate>
                </div>
              </div>
            </el-form-item>
            <el-form-item>
              分享您对门课程的看法！！！
              <el-input :rows="8" type="textarea" placeholder="请输入评价内容" v-model="form.comment" maxlength="50"
                show-word-limit>
              </el-input>
            </el-form-item>
            <!-- 返回按钮和发布按钮 -->
            <div class="button" style="text-align: center; margin-top: 40px;">
              <el-button type="primary" style="margin-left: 20px;" @click="goBack()">返回</el-button>
              <el-button type="primary" style="margin-left: 20px;" @click="toSubmit()">提交评价</el-button>
            </div>
          </el-form>
        </div>

      </el-card>
    </div>
  </div>
</template>

<script>
import { get, post } from '@/utils/request'
import { mapGetters } from 'vuex'

export default {

  data() {
    return {
      courseData: {},
      form: {
        course_id: this.$route.query.id,
        status: '暂未审核',
        created: Date.now(),
        editing:false
      },
      colors: ['#99A9BF', '#F7BA2A', '#FF9900']
    }
  },
  computed: {
    ...mapGetters([
      'userId',
    ]),
    value_average() {
      // 计算平均值，如果任何一个评分为 null，则不计算平均值
      if (this.form.value1 === null || this.form.value2 === null ||
        this.form.value3 === null || this.form.value4 === null ||
        this.form.value5 === null) {
        return null;
      }
      return (this.form.value1 + this.form.value2 + this.form.value3 +
        this.form.value4 + this.form.value5) / 5;
    }
  },
  methods: {
    async toSubmit() {
      this.form.user_id = this.userId; // 确保用户ID已经设置
      console.log(this.form); // 打印表单数据，用于调试

      try {
        let res = await post('review/addReview', this.form); // 发送请求
        console.log(res); // 打印响应，用于调试
        // 根据响应状态进行处理
        if (res.status === 400) {
          // 用户已经评价过该课程
          this.$message.error({
            title: '评价失败',
            message: res.message || '您已经评价过这门课程',
            type: 'info'
          });
        } else if (res.status === 200) {
          // 评价成功
          this.$notify({
            title: '成功',
            message: res.message || '评论成功',
            type: 'success'
          });
          this.$router.go(-1); // 返回上一页
        } else {
          // 其他错误
          this.$notify.error({
            title: '失败',
            message: res.message || '评论失败，请稍后重试。',
            type: 'info'
          });
        }
      } catch (error) {
        // 捕获并处理请求过程中的异常
        // 确保这个错误不是由后端返回的状态码400引起的
        if (!(error instanceof Error && error.message === '您已经评价过这门课程')) {
          console.error('发生错误：', error); // 打印错误信息，用于调试
          this.$notify.error({
            title: '错误',
            message: error.message || '发生未知错误，请稍后重试。',
            type: 'error'
          });
        }
      }
    },
    goBack() {
      this.$router.go(-1)
    },
    async getCourse() {
      console.log(this.$route.query.id);
      let res = await get('course/detail', { id: this.$route.query.id })
      console.log(res);
      this.courseData = res.data;
    },
  },
  created() {
    this.getCourse()
  },
  watch: {
    // 监听计算属性 value_average 的变化，并更新 form.value_average
    value_average(newVal) {
      this.form.value_average = newVal;
    }
  }
}
</script>